<template>
  <!-- 抽屉式弹窗 -->
  <tiny-drawer
    :title="title"
    :visible="isShow"
    @update:isShow="handlerCancer"
    :dragable="params.dragable || voDrawer.dragable"
    :mask="params.mask || voDrawer.mask"
    :mask-closable="params.maskClosable || voDrawer.maskClosable"
    :placement="params.placement || voDrawer.placement"
    :show-close="params.showClose || voDrawer.showClose"
    :show-header="params.showHeader || voDrawer.showHeader"
    :width="params.width || voDrawer.width"
    :z-index="params.zIndex || voDrawer.zIndex"
    @close="close">
    <br />

    <slot />
  </tiny-drawer>
</template>

<script setup>
  import {ref, reactive, toRefs, onBeforeMount, getCurrentInstance} from 'vue';
  import {Drawer as TinyDrawer} from '@opentiny/vue';
  import voDrawer from '@/pub/vo-drawer.js';
  let {proxy} = getCurrentInstance();
  const data = reactive({});
  const emits = defineEmits(['update:isShow', 'open', 'opened', 'close', 'closed']);
  const handlerCancer = () => {
    emits('update:isShow', false);
  };
  const close = () => {
    emits('update:isShow', false);
  };
  const props = defineProps({
    params: {type: Object, defult: {}},
    title: {type: String, defult: ''},
    isShow: {type: Boolean, defult: false},
  });
</script>
<style lang="scss" scoped>
  .tiny-drawer {
    --ti-drawer-min-width: calc(var(--ti-common-space-10, 10px) * 50);
    --ti-drawer-max-width: calc(var(--ti-common-space-10, 10px) * 100);
    --ti-drawer-bg-color: var(--ti-common-color-bg-white-normal, #fff);
    --ti-drawer-padding-left: var(--ti-common-space-8x, 32px);
    --ti-drawer-padding-right: var(--ti-common-space-10x, 40px);
    --ti-drawer-shadow: var(--ti-common-shadow-4-down, 0 8px 40px 0 rgba(0, 0, 0, 0.2));
    --ti-drawer-divider-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
    --ti-drawer-radius: var(--ti-common-space-0, 0px);
    --ti-drawer-header-padding-top: var(--ti-common-space-2x, 32px);
    --ti-drawer-header-padding-bottom: var(--ti-common-space-2x, 20px);
    --ti-drawer-header-padding-left: var(--ti-common-space-0, 0px);
    --ti-drawer-body-padding-right: var(--ti-common-space-0, 0px);
    --ti-drawer-head-title-font-size: var(--ti-common-font-size-2, 17px);
    --ti-drawer-head-text-color: var(--ti-common-color-text-primary, #252b3a);
    --ti-drawer-head-title-font-weight: var(--ti-common-font-weight-7, bold);
    --ti-drawer-btn-width: var(--ti-common-size-8x, 32px);
    --ti-drawer-btn-height: var(--ti-drawer-btn-width);
    --ti-drawer-close-icon-size: var(--ti-common-font-size-1, 14px);
    --ti-drawer-btn-border-radius: var(--ti-common-border-radius-1, 4px);
    --ti-drawer-close-icon-color-hover: var(--ti-common-color-icon-hover, #5e7ce0);
    --ti-drawer-btn-position-top: var(--ti-common-space-5x, 20px);
    --ti-drawer-btn-position-right: var(--ti-common-space-5x, 20px);
    --ti-drawer-body-padding-top: var(--ti-common-space-8x, 32px);
    --ti-drawer-body-padding-bottom: var(--ti-common-space-0, 0px);
    --ti-drawer-body-padding-left: var(--ti-common-space-0, 0px);
    --ti-drawer-header-padding-right: var(--ti-common-space-0, 0px);
    --ti-drawer-footer-text-align: right;
    --ti-drawer-footer-padding-top: var(--ti-common-space-5x, 20px);
    --ti-drawer-footer-padding-bottom: var(--ti-common-space-8x, 32px);
    --ti-drawer-footer-padding-left: var(--ti-common-space-0, 0px);
    --ti-drawer-footer-padding-right: var(--ti-common-space-0, 0px);
    --ti-drawer-footer-margin-left: var(--ti-common-space-8x, 32px);
    --ti-drawer-footer-margin-right: var(--ti-common-space-10x, 40px);
  }
  .tiny-drawer .tiny-drawer__main .tiny-drawer__box .tiny-drawer__header-wrapper .tiny-drawer__headerbtn {
    border: none;
    outline: 0;
    background: 0 0;
    padding: 0;
    line-height: 1;
    position: absolute;
    top: calc(var(--ti-drawer-btn-position-top) - (var(--ti-drawer-btn-height) - var(--ti-drawer-close-icon-size)) / 1.2);
    right: calc(var(--ti-drawer-btn-position-right) - (var(--ti-drawer-btn-width) - var(--ti-drawer-close-icon-size)) / 1.5);
    cursor: pointer;
    height: var(--ti-drawer-btn-height);
    width: var(--ti-drawer-btn-width);
  }
</style>
